<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESG智能管理平台 - 完整系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <style>
        body { 
            margin: 0; 
            padding: 0; 
            font-family: system-ui, -apple-system, sans-serif; 
            background-color: #f9fafb;
        }
        * { box-sizing: border-box; }
        .transition-all { transition: all 0.3s ease; }
        .sidebar-transition { transition: transform 0.3s ease-in-out; }
        .fade-in { animation: fadeIn 0.5s ease-in; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .metric-card {
            transition: all 0.3s ease;
        }
        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        .sidebar-hidden {
            transform: translateX(-100%);
        }
        .content-expanded {
            margin-left: 0;
        }
        .notification-dot {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
    </style>
</head>
<body>
    <div id="app" class="h-screen flex bg-gray-50">
        <!-- 侧边栏 -->
        <div id="sidebar" class="fixed inset-y-0 left-0 z-40 w-64 bg-white shadow-lg sidebar-transition">
            <div class="flex flex-col h-full">
                <!-- Logo区域 -->
                <div class="flex items-center justify-between p-4 border-b">
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
                            <span class="text-white font-bold text-sm">ESG</span>
                        </div>
                        <span class="font-bold text-gray-900">智能管理平台</span>
                    </div>
                    <button id="closeSidebar" class="lg:hidden p-1 rounded-md hover:bg-gray-100">
                        <i data-lucide="x" class="h-5 w-5"></i>
                    </button>
                </div>

                <!-- 导航菜单 -->
                <nav class="flex-1 p-4 space-y-2 overflow-y-auto">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
                        主要功能
                    </div>
                    <div class="space-y-1" id="navigation">
                        <!-- 动态生成导航项目 -->
                    </div>
                </nav>

                <!-- 用户信息 -->
                <div class="p-4 border-t bg-white">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center">
                            <i data-lucide="user" class="h-5 w-5 text-white"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium text-gray-900">张总监</div>
                            <div class="text-sm text-gray-500">ESG总监</div>
                        </div>
                        <i data-lucide="settings" class="h-4 w-4 text-gray-400 cursor-pointer hover:text-gray-600"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div id="mainContent" class="flex-1 flex flex-col transition-all lg:ml-64">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm border-b border-gray-200 relative z-30">
                <div class="flex items-center justify-between px-4 py-3">
                    <div class="flex items-center space-x-4">
                        <button id="toggleSidebar" class="p-2 rounded-md hover:bg-gray-100">
                            <i data-lucide="menu" class="h-5 w-5"></i>
                        </button>
                        
                        <div class="flex items-center space-x-3">
                            <h1 id="pageTitle" class="text-xl font-bold text-gray-900">ESG总览</h1>
                        </div>
                    </div>

                    <div class="flex items-center space-x-4">
                        <!-- 全局搜索 -->
                        <div class="relative">
                            <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400"></i>
                            <input
                                type="text"
                                placeholder="搜索数据、报告、任务..."
                                class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64"
                            />
                        </div>

                        <!-- 通知中心 -->
                        <div class="relative">
                            <button class="p-2 rounded-lg hover:bg-gray-100 relative">
                                <i data-lucide="bell" class="h-5 w-5 text-gray-600"></i>
                                <span class="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full notification-dot"></span>
                            </button>
                        </div>

                        <!-- 用户菜单 -->
                        <div class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <div class="w-8 h-8 gradient-bg rounded-full flex items-center justify-center">
                                <i data-lucide="user" class="h-4 w-4 text-white"></i>
                            </div>
                            <span class="text-sm font-medium text-gray-700">张总监</span>
                            <i data-lucide="chevron-down" class="h-4 w-4 text-gray-500"></i>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 主内容 -->
            <main id="pageContent" class="flex-1 overflow-auto">
                <!-- 动态加载的页面内容 -->
            </main>
        </div>

        <!-- 侧边栏遮罩 (移动端) -->
        <div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden hidden"></div>
    </div>

    <script>
        // 应用状态
        const appState = {
            currentModule: 'dashboard',
            sidebarOpen: true,
            modules: {
                dashboard: {
                    name: 'ESG总览',
                    icon: 'layout-dashboard',
                    description: '全平台数据统览',
                    color: 'blue'
                },
                carbon: {
                    name: '碳足迹管理',
                    icon: 'leaf',
                    description: '碳排放监控与管理',
                    color: 'green'
                },
                workbench: {
                    name: '产品工作台',
                    icon: 'users',
                    description: '产品设计与协作',
                    color: 'purple'
                },
                compliance: {
                    name: '合规管理',
                    icon: 'shield',
                    description: '法规遵循与审计',
                    color: 'red',
                    status: 'development'
                },
                'supply-chain': {
                    name: '供应链ESG',
                    icon: 'globe',
                    description: '供应商ESG管理',
                    color: 'orange',
                    status: 'planning'
                },
                reporting: {
                    name: 'ESG报告',
                    icon: 'file-text',
                    description: '报告生成与披露',
                    color: 'indigo'
                }
            }
        };

        // 初始化应用
        function initApp() {
            renderNavigation();
            renderPage();
            initEventListeners();
            lucide.createIcons();
        }

        // 渲染导航
        function renderNavigation() {
            const nav = document.getElementById('navigation');
            nav.innerHTML = Object.entries(appState.modules).map(([key, module]) => {
                const isActive = appState.currentModule === key;
                const statusIndicator = module.status ? 
                    `<div class="w-2 h-2 ${module.status === 'development' ? 'bg-yellow-400' : 'bg-gray-400'} rounded-full"></div>` : '';
                
                return `
                    <button 
                        onclick="navigateToModule('${key}')"
                        class="w-full flex items-center space-x-3 px-3 py-2 rounded-lg text-left transition-colors ${
                            isActive 
                                ? 'bg-blue-50 text-blue-700 border border-blue-200' 
                                : 'text-gray-700 hover:bg-gray-50'
                        }"
                    >
                        <i data-lucide="${module.icon}" class="h-5 w-5 ${isActive ? 'text-blue-600' : 'text-gray-500'}"></i>
                        <div class="flex-1">
                            <div class="font-medium">${module.name}</div>
                            <div class="text-xs text-gray-500">${module.description}</div>
                        </div>
                        ${statusIndicator}
                    </button>
                `;
            }).join('');
        }

        // 导航到模块
        function navigateToModule(moduleKey) {
            appState.currentModule = moduleKey;
            document.getElementById('pageTitle').textContent = appState.modules[moduleKey].name;
            renderNavigation();
            renderPage();
            lucide.createIcons();
        }

        // 渲染页面内容
        function renderPage() {
            const content = document.getElementById('pageContent');
            
            switch (appState.currentModule) {
                case 'dashboard':
                    content.innerHTML = renderDashboard();
                    break;
                case 'carbon':
                    content.innerHTML = renderCarbonModule();
                    break;
                case 'workbench':
                    content.innerHTML = renderWorkbenchModule();
                    break;
                case 'compliance':
                    content.innerHTML = renderComplianceModule();
                    break;
                case 'supply-chain':
                    content.innerHTML = renderSupplyChainModule();
                    break;
                case 'reporting':
                    content.innerHTML = renderReportingModule();
                    break;
                default:
                    content.innerHTML = renderDashboard();
            }
        }

        // 渲染仪表板
        function renderDashboard() {
            return `
                <div class="p-6 space-y-6 fade-in">
                    <!-- 关键指标卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="bg-white rounded-lg shadow metric-card p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">碳排放强度</p>
                                    <p class="text-2xl font-bold text-green-600">0.85</p>
                                    <p class="text-xs text-gray-500">tCO2e/万元营收</p>
                                </div>
                                <div class="p-3 bg-green-100 rounded-full">
                                    <i data-lucide="leaf" class="h-6 w-6 text-green-600"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <i data-lucide="trending-up" class="h-4 w-4 text-green-500 mr-1"></i>
                                <span class="text-sm text-green-600">比去年下降12%</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow metric-card p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">合规得分</p>
                                    <p class="text-2xl font-bold text-blue-600">94.2</p>
                                    <p class="text-xs text-gray-500">满分100分</p>
                                </div>
                                <div class="p-3 bg-blue-100 rounded-full">
                                    <i data-lucide="shield" class="h-6 w-6 text-blue-600"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <i data-lucide="check-circle" class="h-4 w-4 text-green-500 mr-1"></i>
                                <span class="text-sm text-green-600">优秀等级</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow metric-card p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">供应商ESG评估</p>
                                    <p class="text-2xl font-bold text-orange-600">76%</p>
                                    <p class="text-xs text-gray-500">已完成评估</p>
                                </div>
                                <div class="p-3 bg-orange-100 rounded-full">
                                    <i data-lucide="globe" class="h-6 w-6 text-orange-600"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <i data-lucide="clock" class="h-4 w-4 text-orange-500 mr-1"></i>
                                <span class="text-sm text-orange-600">24家待评估</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow metric-card p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-600">报告完成度</p>
                                    <p class="text-2xl font-bold text-purple-600">89%</p>
                                    <p class="text-xs text-gray-500">2024年度报告</p>
                                </div>
                                <div class="p-3 bg-purple-100 rounded-full">
                                    <i data-lucide="file-text" class="h-6 w-6 text-purple-600"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center">
                                <i data-lucide="alert-circle" class="h-4 w-4 text-yellow-500 mr-1"></i>
                                <span class="text-sm text-yellow-600">11天截止</span>
                            </div>
                        </div>
                    </div>

                    <!-- 业务流程和动态 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div class="bg-white rounded-lg shadow">
                            <div class="p-6 border-b border-gray-200">
                                <div class="flex items-center justify-between">
                                    <h3 class="text-lg font-semibold text-gray-900">跨模块业务流程</h3>
                                    <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">
                                        <i data-lucide="plus" class="h-4 w-4 mr-1"></i>
                                        新建流程
                                    </button>
                                </div>
                            </div>
                            <div class="p-6 space-y-4">
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <div>
                                            <h4 class="font-medium text-gray-900">年度ESG报告流程</h4>
                                            <p class="text-sm text-gray-600">整合所有模块数据生成年度报告</p>
                                        </div>
                                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">执行中</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2 mb-3">
                                        <div class="bg-blue-600 h-2 rounded-full transition-all" style="width: 65%"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-600">等待合规部门审核</span>
                                        <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">查看详情</button>
                                    </div>
                                </div>

                                <div class="border border-gray-200 rounded-lg p-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <div>
                                            <h4 class="font-medium text-gray-900">碳减排行动计划</h4>
                                            <p class="text-sm text-gray-600">从目标设定到执行监控的完整流程</p>
                                        </div>
                                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">规划中</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2 mb-3">
                                        <div class="bg-blue-600 h-2 rounded-full transition-all" style="width: 25%"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-600">制定供应商减排要求</span>
                                        <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">查看详情</button>
                                    </div>
                                </div>

                                <div class="border border-gray-200 rounded-lg p-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <div>
                                            <h4 class="font-medium text-gray-900">供应商ESG评估</h4>
                                            <p class="text-sm text-gray-600">供应商ESG表现评估与改进</p>
                                        </div>
                                        <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">进行中</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2 mb-3">
                                        <div class="bg-green-600 h-2 rounded-full transition-all" style="width: 80%"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-600">更新评估结果到报告模块</span>
                                        <button class="text-blue-600 hover:text-blue-700 text-sm font-medium">查看详情</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow">
                            <div class="p-6 border-b border-gray-200">
                                <h3 class="text-lg font-semibold text-gray-900">最新动态</h3>
                            </div>
                            <div class="p-6 space-y-4">
                                <div class="flex items-start space-x-3">
                                    <div class="p-2 rounded-full bg-green-100">
                                        <i data-lucide="check-circle" class="h-4 w-4 text-green-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">碳足迹数据更新</div>
                                        <div class="text-sm text-gray-600">2024年Q1碳排放数据已同步</div>
                                        <div class="text-xs text-gray-500 mt-1">5分钟前</div>
                                    </div>
                                </div>

                                <div class="flex items-start space-x-3">
                                    <div class="p-2 rounded-full bg-yellow-100">
                                        <i data-lucide="alert-circle" class="h-4 w-4 text-yellow-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">合规检查提醒</div>
                                        <div class="text-sm text-gray-600">ESG报告截止日期临近</div>
                                        <div class="text-xs text-gray-500 mt-1">1小时前</div>
                                    </div>
                                </div>

                                <div class="flex items-start space-x-3">
                                    <div class="p-2 rounded-full bg-blue-100">
                                        <i data-lucide="bell" class="h-4 w-4 text-blue-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">工作台任务</div>
                                        <div class="text-sm text-gray-600">新的产品设计评审待处理</div>
                                        <div class="text-xs text-gray-500 mt-1">2小时前</div>
                                    </div>
                                </div>

                                <div class="flex items-start space-x-3">
                                    <div class="p-2 rounded-full bg-purple-100">
                                        <i data-lucide="users" class="h-4 w-4 text-purple-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">团队协作更新</div>
                                        <div class="text-sm text-gray-600">李环保完成了Q1排放数据审核</div>
                                        <div class="text-xs text-gray-500 mt-1">3小时前</div>
                                    </div>
                                </div>

                                <div class="flex items-start space-x-3">
                                    <div class="p-2 rounded-full bg-indigo-100">
                                        <i data-lucide="file-text" class="h-4 w-4 text-indigo-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">报告生成完成</div>
                                        <div class="text-sm text-gray-600">月度碳足迹报告已生成并发送</div>
                                        <div class="text-xs text-gray-500 mt-1">4小时前</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 模块状态概览 -->
                    <div class="bg-white rounded-lg shadow">
                        <div class="p-6 border-b border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900">平台模块状态</h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                ${Object.entries(appState.modules).map(([key, module]) => `
                                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="navigateToModule('${key}')">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center space-x-3">
                                                <div class="p-2 bg-${module.color}-100 rounded-lg">
                                                    <i data-lucide="${module.icon}" class="h-5 w-5 text-${module.color}-600"></i>
                                                </div>
                                                <div>
                                                    <div class="font-medium text-gray-900">${module.name}</div>
                                                    <div class="text-sm text-gray-500">${module.description}</div>
                                                </div>
                                            </div>
                                            <span class="px-2 py-1 rounded-full text-xs font-medium ${
                                                !module.status ? 'bg-green-100 text-green-800' :
                                                module.status === 'development' ? 'bg-yellow-100 text-yellow-800' :
                                                'bg-gray-100 text-gray-800'
                                            }">
                                                ${!module.status ? '运行中' : 
                                                  module.status === 'development' ? '开发中' : '规划中'}
                                            </span>
                                        </div>
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600">点击进入模块</span>
                                            <i data-lucide="arrow-right" class="h-4 w-4 text-gray-400"></i>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 其他模块渲染函数
        function renderCarbonModule() {
            return `
                <div class="p-6 fade-in">
                    <div class="bg-white rounded-lg shadow p-8 text-center">
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="leaf" class="h-8 w-8 text-green-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">碳足迹管理模块</h3>
                        <p class="text-gray-600 mb-6">完整的碳排放监控、计算与减排目标管理系统</p>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <h4 class="font-medium text-green-900 mb-2">数据收集管理</h4>
                                <p class="text-sm text-green-700">多源数据接入，自动化数据采集和质量管控</p>
                            </div>
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <h4 class="font-medium text-blue-900 mb-2">碳足迹计算</h4>
                                <p class="text-sm text-blue-700">基于国际标准的碳排放因子库和计算引擎</p>
                            </div>
                            <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                                <h4 class="font-medium text-purple-900 mb-2">减排目标管理</h4>
                                <p class="text-sm text-purple-700">科学减排目标设定与进度跟踪</p>
                            </div>
                        </div>
                        <button class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">
                            进入碳足迹管理系统
                        </button>
                    </div>
                </div>
            `;
        }

        function renderWorkbenchModule() {
            return `
                <div class="p-6 fade-in">
                    <div class="bg-white rounded-lg shadow p-8 text-center">
                        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="users" class="h-8 w-8 text-purple-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">产品工作台</h3>
                        <p class="text-gray-600 mb-6">产品设计、需求管理、项目协作的统一工作空间</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                                <h4 class="font-medium text-purple-900 mb-2">产品设计</h4>
                                <p class="text-sm text-purple-700">从用户研究到产品设计的完整流程</p>
                            </div>
                            <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
                                <h4 class="font-medium text-indigo-900 mb-2">团队协作</h4>
                                <p class="text-sm text-indigo-700">高效的团队沟通与项目管理工具</p>
                            </div>
                        </div>
                        <button class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
                            进入产品工作台
                        </button>
                    </div>
                </div>
            `;
        }

        function renderComplianceModule() {
            return `
                <div class="p-6 fade-in">
                    <div class="bg-white rounded-lg shadow p-8 text-center">
                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="shield" class="h-8 w-8 text-red-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">合规管理</h3>
                        <p class="text-gray-600 mb-6">法规遵循、标准管理、审计支持系统</p>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                            <div class="flex items-center justify-center text-yellow-800">
                                <i data-lucide="clock" class="h-4 w-4 mr-2"></i>
                                <span class="text-sm font-medium">此模块正在开发中</span>
                            </div>
                        </div>
                        <button class="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors">
                            进入合规管理系统
                        </button>
                    </div>
                </div>
            `;
        }

        function renderSupplyChainModule() {
            return `
                <div class="p-6 fade-in">
                    <div class="bg-white rounded-lg shadow p-8 text-center">
                        <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="globe" class="h-8 w-8 text-orange-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">供应链ESG</h3>
                        <p class="text-gray-600 mb-6">供应商ESG管理与评估系统</p>
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
                            <div class="flex items-center justify-center text-gray-800">
                                <i data-lucide="alert-circle" class="h-4 w-4 mr-2"></i>
                                <span class="text-sm font-medium">此模块仍在规划阶段</span>
                            </div>
                        </div>
                        <button class="bg-orange-600 text-white px-6 py-3 rounded-lg hover:bg-orange-700 transition-colors">
                            进入供应链ESG系统
                        </button>
                    </div>
                </div>
            `;
        }

        function renderReportingModule() {
            return `
                <div class="p-6 fade-in">
                    <div class="bg-white rounded-lg shadow p-8 text-center">
                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="file-text" class="h-8 w-8 text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">ESG报告</h3>
                        <p class="text-gray-600 mb-6">报告生成与披露管理系统</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
                                <h4 class="font-medium text-indigo-900 mb-2">报告生成</h4>
                                <p class="text-sm text-indigo-700">多标准自动化报告生成</p>
                            </div>
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <h4 class="font-medium text-blue-900 mb-2">披露管理</h4>
                                <p class="text-sm text-blue-700">多平台ESG数据披露</p>
                            </div>
                        </div>
                        <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors">
                            进入ESG报告系统
                        </button>
                    </div>
                </div>
            `;
        }

        // 事件监听器
        function initEventListeners() {
            // 侧边栏切换
            document.getElementById('toggleSidebar').addEventListener('click', () => {
                appState.sidebarOpen = !appState.sidebarOpen;
                toggleSidebar();
            });

            document.getElementById('closeSidebar').addEventListener('click', () => {
                appState.sidebarOpen = false;
                toggleSidebar();
            });

            // 点击遮罩关闭侧边栏
            document.getElementById('sidebarOverlay').addEventListener('click', () => {
                appState.sidebarOpen = false;
                toggleSidebar();
            });

            // 响应式处理
            window.addEventListener('resize', () => {
                if (window.innerWidth >= 1024) {
                    appState.sidebarOpen = true;
                    toggleSidebar();
                }
            });
        }

        // 切换侧边栏
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            const overlay = document.getElementById('sidebarOverlay');

            if (appState.sidebarOpen) {
                sidebar.classList.remove('sidebar-hidden');
                if (window.innerWidth >= 1024) {
                    mainContent.classList.remove('content-expanded');
                    mainContent.classList.add('lg:ml-64');
                } else {
                    overlay.classList.remove('hidden');
                }
            } else {
                sidebar.classList.add('sidebar-hidden');
                if (window.innerWidth >= 1024) {
                    mainContent.classList.add('content-expanded');
                    mainContent.classList.remove('lg:ml-64');
                } else {
                    overlay.classList.add('hidden');
                }
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html> 